<template>
  <!-- 精准定兵分析 -->
  <div class="chart" id="main2"></div>
</template>

<script>
import * as echarts from "echarts";
import { onMounted } from "vue";
export default {
  setup() {
    onMounted(() => {
      //需要获取到element,所以是onMounted的Hook
      let myChart = echarts.init(document.getElementById("main2"));
      let option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          data: [
            "梅菉街道",
            "博铺街道",
            "海滨街道",
            "塘尾街道",
            "大山江街道",
            "兰石镇",
            "覃巴镇",
            "吴阳镇",
            "黄坡镇",
            "振文镇",
            "樟铺镇",
            "塘缀镇",
            "长岐镇",
            "浅水镇",
            "王村港镇",
          ],
          bottom: "0",
          right: -10,
          orient: "vertical",
          textStyle: {
            color: "white",
          },
          itemWidth: 5,
          itemHeight: 10,
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            selectedMode: "single",
            radius: [0, "30%"],
            label: {
              position: "inner",
              fontSize: 14,
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1548, name: "海滨街道" },
              { value: 775, name: "塘尾街道" },
              { value: 775, name: "塘缀镇" },
              { value: 775, name: "长岐镇" },
              { value: 679, name: "樟铺镇", selected: true },
            ],
          },
          {
            name: "Access From",
            type: "pie",
            radius: ["45%", "60%"],
            labelLine: { length: 30 },
            data: [
              { value: 1048, name: "梅菉街道" },
              { value: 335, name: "博铺街道" },
              { value: 310, name: "大山江街道" },
              { value: 251, name: "兰石镇" },
              { value: 234, name: "覃巴镇" },
              { value: 147, name: "吴阳镇" },
              { value: 135, name: "黄坡镇" },
              { value: 102, name: "振文镇" },
              { value: 102, name: "浅水镇" },
              { value: 102, name: "王村港镇" },
            ],
          },
        ],
      };
      myChart.setOption(option);
      window.onresize = function () {
        //自适应大小
        myChart.resize();
      };
    });
  },
  components: {},
  mounted() {},
};
</script>


<style scoped>
.chart {
  width: 100%;
  height: 90%;
}
</style>